<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/toastr.min.css">
<link rel="stylesheet" type="text/css" href="css/hdfs.css">
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<title>My HDFS</title>
</head>

<body>
	<div class="container ">
		<h3 class="">欢迎使用个人文件系统</h3>
		<div class="container">
			<div class="page-header">
				<h4>文件展示</h4>
			</div>
			<div class="alert alert-danger" id="alert-panel"
				style="display: none">
				<button type="button" class="close"
					onclick="$('#alert-panel').hide();">×</button>
				<div class="alert-body" id="alert-panel-body"></div>
			</div>
			<div class="modal" id="btn-create-directory" tabindex="-1"
				role="dialog" aria-hidden="true" data-backdrop="static">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-hidden="true">×</button>
							<h4 class="modal-title">创建文件夹</h4>
						</div>
						<div class="modal-body">
							<div class="form-group">
								<div class="input-group">
									<span class="input-group-addon" id="new_directory_pwd"></span>
									<input type="text" class="form-control" id="new_directory"
										placeholder="请输入需要创建文件夹的路径和名称(例如：/路径/需要创建文件夹名称)">
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn" id="mkdir-directory" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-success"
								id="btn-create-directory-send" data-complete-text="Creating...">创建</button>
						</div>
					</div>
				</div>
			</div>

			<div class="modal hidden-modal-is" id="modal-upload-file" tabindex="-1" role="dialog"
				aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-hidden="true">×</button>
							<h4 class="modal-title" id="file-upload-title">上传文件</h4>
						</div>
						<div class="modal-body" id="file-upload-body">
						<form id="uploadForm" enctype="multipart/form-data;charset=utf-8" method="post"> 
							<input id="modal-upload-file-input" name="file" type="file" class="file">
						</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-success"
								data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-success"
								id="modal-upload-file-button" data-complete-text="Uploading...">上传</button>
						</div>
					</div>
				</div>
			</div>
			<div class="modal" id="delete-modal" tabindex="-1" role="dialog"
				aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-hidden="true">×</button>
							<h4 class="modal-title" id="delete-modal-title"></h4>
						</div>
						<div class="modal-body">
							<div class="panel-body">
								<div id="delete-prompt">是否删除当前所选文件/文件夹?</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-success" id="delete-button"
								data-complete-text="Deleting...">删除</button>
						</div>
					</div>
				</div>
			</div>
			<div class="modal" id="down-modal" tabindex="-1" role="dialog"
				aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-hidden="true">×</button>
							<h4 class="modal-title" id="delete-modal-title"></h4>
						</div>
						<div class="modal-body">
							<div class="panel-body">
								<div id="delete-prompt">是否下载当前所选?</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-success" id="downs-button"
								data-complete-text="Deleting...">下载</button>
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-xs-10 col-md-10">
					<form onsubmit="return false;">
						<div class="input-group">
							<input type="text" class="form-control" id="directory" > <span
								class="input-group-btn">
								<button class="btn btn-default" type="button"
									id="btn-nav-directory" >进入</button>
							</span>
						</div>
					</form>
				</div>
				<div class="col-xs-2 col-md-2">
					<button type="button" class="btn btn-default" data-toggle="modal"
						aria-label="New Directory" data-target="#btn-create-directory"
						title="创建文件夹">
						<span class="glyphicon glyphicon-folder-open"></span>
					</button>
					<button type="button" class="btn btn-default" data-toggle="modal"
						data-target="#modal-upload-file" title="上传文件">
						<span class="glyphicon glyphicon-cloud-upload"></span>
					</button>

				</div>
			</div>

			<br>
			<div id="panel">
				<div id="table-explorer_wrapper"
					class="dataTables_wrapper form-inline dt-bootstrap no-footer">
					<div class="row">
						<div class="col-sm-6">
							<div id="table-explorer_filter" class="dataTables_filter">
								<label>当前文件列表:
									<!-- <input type="search" class="form-control input-sm" placeholder=""
									aria-controls="table-explorer"> -->
									
								</label>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-12">
							<table class="table dataTable no-footer" id="table-explorer"
								role="grid" aria-describedby="table-explorer_info">
								<thead>
									<tr role="row">
										<th class="sorting" tabindex="0"
											aria-controls="table-explorer" rowspan="1" colspan="1"
											style="width: 140px;">文件名称</th>
										<th class="sorting" tabindex="0"
											aria-controls="table-explorer" rowspan="1" colspan="1"
											style="width: 90px;">拥有者</th>
										<th class="sorting" tabindex="0"
											aria-controls="table-explorer" rowspan="1" colspan="1"
											style="width: 90px;">大小</th>
										<th class="sorting" tabindex="0"
											aria-controls="table-explorer" rowspan="1" colspan="1"
											style="width: 160px;">修改时间</th>
										<th class="sorting" tabindex="0"
											aria-controls="table-explorer" rowspan="1" colspan="1"
											style="width: 90px;">备份数</th>
										<th class="sorting_disabled" rowspan="1" colspan="1"
											aria-label="" style="width: 3px;"></th>
									</tr>
								</thead>
								<tbody>
									<tr inode-path="data" data-permission="755"
										class="explorer-entry odd" role="row">
										<td><a inode-type="DIRECTORY"
											class="explorer-browse-links">data</a></td>
										<td><span class="explorer-owner-links editable editable-click">root</span></td>
										<td>0 B</td>
										<td>Aug 13 11:43</td>
										<td><span class="explorer-replication-links editable editable-click">0</span></td>
										<td><span class=" glyphicon glyphicon-trash" data-toggle="modal" data-target="#delete-modal" ></span></td>
										<td><span class=" glyphicon " data-toggle="modal" data-target="#down-modal" >下载</span></td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-5">
							<!-- <div class="dataTables_info" id="table-explorer_info">暂无文件</div> -->
						</div>
						<!-- <div class="col-sm-7">
							<div class="dataTables_paginate paging_simple_numbers"
								id="table-explorer_paginate">
								<ul class="pagination">
									<li class="paginate_button previous disabled"
										id="table-explorer_previous"><a href="#"
										aria-controls="table-explorer" data-dt-idx="0" tabindex="0">上一页</a></li>
									<li class="paginate_button active"><a href="#"
										aria-controls="table-explorer" data-dt-idx="1" tabindex="0">1</a></li>
									<li class="paginate_button next disabled"
										id="table-explorer_next"><a href="#"
										aria-controls="table-explorer" data-dt-idx="2" tabindex="0">下一页</a></li>
								</ul>
							</div>
						</div> -->
					</div>
				</div>
			</div>

			<div class="row">
				<hr>
				<div class="col-xs-2">
				 <button type="button" class="btn btn-default"  id="return_superDir">返回上一级</button>
					<!-- <p>2019-08-14 Set up</p> -->
				</div>
			</div>
		</div>
	</div>
	<div class="alert"></div>
</body>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
 <script type="text/javascript"  src="js/toastr.min.js"></script>
 <script src="js/hdfs.js" type="text/javascript"></script>
</html>